<script setup>
import api from '../api/itinerary_detail_api.js'  // 行程详情接口路径
import { ref, onMounted } from "vue";
import { ElMessageBox } from "element-plus";
import lodash from 'lodash'

// 数据定义区域
const tableData = ref([]);
const total = ref(0);
const editWinVisible = ref(false);

const searchObj = ref({
  current: 1,
  limit: 10,
  itinerary_id: '',
  attraction_id: ''
});

const obj = ref({});

// 查询方法
const search = async () => {
  const result = await api.pageWithDetails(searchObj.value);
  tableData.value = result.data;
  total.value = result.count;
};

onMounted(async () => {
  await search();
});

const editCancel = () => {
  obj.value = {};
  editWinVisible.value = false;
};

const editCommit = async () => {
  if (obj.value.id) {
    await api.edit(obj.value);
  } else {
    await api.add(obj.value);
  }
  search();
  editWinVisible.value = false;
};

const handleSearch = () => {
  searchObj.value.current = 1;
  search();
};

const handleSizeChange = (val) => {
  searchObj.value.limit = val;
  search();
};

const handleCurrentChange = (val) => {
  searchObj.value.current = val;
  search();
};

const handleAdd = () => {
  obj.value = {
    itinerary_id: '',
    day_number: 1,
    attraction_id: '',
    visit_time: '',
    notes: ''
  };
  editWinVisible.value = true;
};

const handleEdit = (index, row) => {
  obj.value = lodash.clone(row);
  editWinVisible.value = true;
};

const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确认删除该行程详情吗？',
      '删除提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'error'
      }
  )
      .then(async () => {
        await api.del(row.id);
        searchObj.value.current = 1;
        search();
      })
      .catch(() => {});
};
</script>

<template>
  <div class="itinerary-detail-management-container">
    <!-- 查询表单 -->
    <el-form :inline="true" :model="searchObj" style="margin-top: 10px; margin-bottom: 15px;">
      <el-form-item label="行程ID">
        <el-input v-model="searchObj.itinerary_id" placeholder="请输入行程ID" clearable style="width: 200px;" />
      </el-form-item>
      <el-form-item label="景点ID">
        <el-input v-model="searchObj.attraction_id" placeholder="请输入景点ID" clearable style="width: 200px;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <!-- 行程详情列表 -->
    <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px;"
        border
        stripe
        :header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
    >
<!--      <el-table-column label="ID" width="80" align="center">-->
<!--        <template #default="scope">-->
<!--          {{ scope.row.id }}-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="行程ID" min-width="120">
        <template #default="scope">
          {{ scope.row.itinerary_id }}
        </template>
      </el-table-column>
      <el-table-column label="天数" min-width="100">
        <template #default="scope">
          <el-tag type="info">{{ scope.row.day_number }} 天</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="景点" min-width="120">
        <template #default="scope">
          {{ scope.row.attraction_name }}
        </template>
      </el-table-column>
      <el-table-column label="参观时间" min-width="150">
        <template #default="scope">
          {{ scope.row.visit_time }}
        </template>
      </el-table-column>
      <el-table-column label="备注" min-width="200">
        <template #default="scope">
          {{ scope.row.notes }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              style="margin-left: 5px;"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        v-model:current-page="searchObj.current"
        v-model:page-size="searchObj.limit"
        :page-sizes="[10, 20, 30, 50]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="text-align: right; margin-top: 10px;"
    />

    <!-- 编辑/新增对话框 -->
    <el-dialog v-model="editWinVisible" title="编辑行程详情信息" width="600px">
      <el-form :model="obj" label-width="100px">
        <el-form-item label="ID" v-if="obj.id">
          <el-input v-model="obj.id" disabled />
        </el-form-item>
        <el-form-item label="行程ID" required>
          <el-input v-model="obj.itinerary_id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="天数" required>
          <el-input
              v-model="obj.day_number"
              type="number"
              min="1"
              autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="景点ID" required>
          <el-input v-model="obj.attraction_id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="参观时间">
          <el-input v-model="obj.visit_time" placeholder="如：上午/下午/14:00" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
              type="textarea"
              v-model="obj.notes"
              autocomplete="off"
              rows="3"
              placeholder="例如：注意事项、个人备注等"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editCancel">取消</el-button>
          <el-button type="primary" @click="editCommit">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
